<template>
  <div class="channel-edit-table">
      <!-- 一定要加row-key -->
      <el-table :data="moduleList" tooltip-effect="dark" row-key="id">
        <el-table-column label="序列" type="index" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="title" label="模块名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="code" label="模块类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>
              {{ $selectFormat['moduleTypeSl'](scope.row.code).label }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="direct" label="模块内容展示方向" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>
              {{scope.row.direct == 0 ? '横向' : '竖向'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="showSize" label="模块显示个数" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="390px">
            <template slot-scope="scope">
              <el-button icon="el-icon-rank">点我拖动</el-button>
              <el-button type="primary" @click="$tabs.open({ name: 'ModuleDetail', params: { id: scope.row.id } })">跳转到目标模块</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="removeModule(scope.row.id)">移除模块</el-button>
            </template>
        </el-table-column>
      </el-table>
    <!-- 底部固定框 -->
    <edit-bar>
      <template slot="right">
        <el-button type="warning" icon="el-icon-plus" @click="moduleDialog = true">添加模块</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveModules">保存频道配置</el-button>
        <el-button type="success" icon="el-icon-upload" @click="pubModules">发布频道配置</el-button>
      </template>
    </edit-bar>
    <!-- 添加模块dialog -->
    <el-dialog width="90%" :visible.sync="moduleDialog" v-if="moduleDialog">
      <module selectedMode @select="moduleSelected"></module>
    </el-dialog>
  </div>
</template>
<script>

import Module from 'views/Module/List';
import EditBar from 'comp/EditBar';

import Sortable from 'sortablejs'

export default {
  props:{
    channel: {
      type: Object,
      default: () => {},
    },
  },
  components:{
    Module,
    EditBar,
  },
  watch: {
    channel() {
      this.getChannesModule();
    },
  },
  data() {
    return {
      moduleList: [],
      moduleDialog: false,
      moduleSaving: false,
    }
  },
  methods: {
    /**
     * 获取频道下的模块数据
     */
    getChannesModule() {
      this.$service.CmsChannelPreview({ channelId: this.channel.id }).then((res) => {
        this.moduleList = [...res];
      });
    },
    /**
     * 移除选择的模块
     */
    removeModule(id){
      this.$confirm('确认从当前频道配置中移除此模块吗?').then(() => {
        this.moduleList.forEach((item,index)=>{
          if(item.id == id){
            this.moduleList.splice(index,1)
          }
        })
      });
    },
    /**
     * 新选择了模块
     */
    moduleSelected(selecetedData) {
      this.moduleList = this.moduleList.concat(selecetedData);
      this.moduleDialog = false;
    },
    /**
     * 保存频道模块
     */
    saveModules() {
      if (this.moduleSaving) return Promise.reject();
      this.moduleSaving = true;
      return this.$service
        .CmsChannelSaveModules(
          {
            channelId: this.channel.id,
            modules: this.moduleList.map((module, index) => {
              return {
                channelId: this.channel.id,
                moduleId: module.id,
                online: 1,
                showSize: module.showSize,
                sortnum: index,
                direct: module.direct,
              };
            }),
          },
          JSON_HEADER,
        )
        .then((res) => {
          this.$message.success('频道下模块配置保存成功!');
          this.getChannesModule();
        })
        .finally(() => {
          this.moduleSaving = false;
        });
    },
    /**
     *发布频道配置
     */
    pubModules() {
      this.$confirm('确认要发布到线上去吗?发布了就真的上线了!!!!').then(() => {
        this.saveModules().then(() => {
          this.$service
            .CmsChannelPublish({
              channelId: this.channel.id,
            })
            .then((res) => {
              this.$message.success('发布完成');
            });
        });
      });
    },
    // 行拖拽
    rowDrop () {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
        // 指定父元素下可被拖拽的子元素
        draggable: ".el-table__row",
        onEnd ({ newIndex, oldIndex }) {
          const currRow = _this.moduleList.splice(oldIndex, 1)[0];
          _this.moduleList.splice(newIndex, 0, currRow);
        }
      });
    },
  },
  created() {
    
  },
  mounted() {
    this.getChannesModule();
    this.rowDrop()
  },
}
</script>
<style lang="less" scoped>
.channel-edit-table{
  /deep/ .el-table th{
    background-color: #e5e5e5 !important;
  }
}

</style>